import { useEffect } from 'react';

export function useScreen(screenBox: HTMLElement | null) {
  //定义大屏缩放比例

  // 根据浏览器大小推断缩放比例
  // 首先要确定设计稿尺寸，默认是 1920 x 1080 可以根据大屏宽度调整
  // 分别计算浏览器和设计图宽高比
  // 如果浏览器的宽比大于设计稿的高比，就取浏览器高度和设计稿高度之比
  // 如果浏览器的宽比小于设计稿的高比，就取浏览器宽度和设计稿宽度之比
  function getScale(w = 1920, h = 1080) {
    const ww = window.document.body.clientWidth / w;
    const wh = window.document.body.clientHeight / h;
    return ww < wh ? ww : wh;
    // return { ww, wh };
  }

  useEffect(() => {
    if (!screenBox) return;

    console.log('screenBox', screenBox);
    const handleResize = () => {
      screenBox.style.transform = `scale(${getScale()})`;
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [screenBox]);

  //   return {

  //   };
}
